h3 
  // START Language list
  .pull-right
    .btn-group(dropdown='', is-open='language.listIsOpen')
      button.btn.btn-default(type='button', dropdown-toggle="")
        | {{language.selected}}
        span.caret
      ul.dropdown-menu.dropdown-menu-right.animated.fadeInUpShort(role='menu')
        li(ng-repeat='(localeId, langName) in language.available')
          a(ng-click='language.set(localeId, $event)', href='#') {{langName}}
  // END Language list    

  | Dashboard
  small {{ 'dashboard.WELCOME' | translate:{ appName: app.name } }}  !

.row
  .col-lg-4
    // START List group
    ul.list-group
        li.list-group-item
          .row.row-table.pv-lg
            .col-xs-6
              p.m0.lead 1204
              p.m0: small Commits this month
            .col-xs-6.text-center
              div(sparkline="", data-bar-color="{{colorByName('info')}}", data-height="60", data-bar-width="10", data-bar-spacing="6", data-chart-range-min="0", values="3,6,7,8,4,5")
        li.list-group-item 
          .row.row-table.pv-lg
            .col-xs-6
              p.m0.lead $ 3,200.00
              p.m0: small Available budget
            .col-xs-6.text-center
              div(sparkline="",data-type='line', data-height='60', data-width='80%', data-line-width='2', data-line-color="{{colorByName('purple')}}", data-chart-range-min="0",data-spot-color='#888', data-min-spot-color="{{colorByName('purple')}}", data-max-spot-color="{{colorByName('purple')}}", data-fill-color='', data-highlight-line-color='#fff', data-spot-radius='3', values="7,3,4,7,5,9,4,4,7,5,9,6,4", data-resize="true")
        li.list-group-item 
          .row.row-table.pv-lg
            .col-xs-6
              p.m0.lead 67
              p.m0: small New followers
            .col-xs-6
              ul.list-inline.text-center
                li: a(href="#", tooltip="Katie"): img.img-responsive.img-circle.thumb24(src="app/img/user/02.jpg", alt="Follower")
                li: a(href="#", tooltip="Cody"): img.img-responsive.img-circle.thumb24(src="app/img/user/01.jpg", alt="Follower")
                li: a(href="#", tooltip="Tamara"): img.img-responsive.img-circle.thumb24(src="app/img/user/03.jpg", alt="Follower")
                li: a(href="#", tooltip="Gene"): img.img-responsive.img-circle.thumb24(src="app/img/user/04.jpg", alt="Follower")
                li: a(href="#", tooltip="Marsha"): img.img-responsive.img-circle.thumb24(src="app/img/user/04.jpg", alt="Follower")
                li: a(href="#", tooltip="Robin"): img.img-responsive.img-circle.thumb24(src="app/img/user/09.jpg", alt="Follower")
    // END List group
  .col-lg-8
    // START bar chart
    #panelChart3.panel
      .panel-heading
        // START button group
        .pull-right.btn-group(dropdown='dropdown2')
          button(type="button", dropdown-toggle="").btn.btn-default.btn-sm
            | Monthly
          ul.dropdown-menu.fadeInLeft.animated(role='menu')
            li
              a(href='#') Daily
            li
              a(href='#') Monthly
            li
              a(href='#') Yearly
        // END button group
        .panel-title Projects Hours
      .panel-wrapper(collapse="panelChart3")
        .panel-body(ng-controller="FlotChartController")
          flot(src="'server/chart/barstackedv2.json'", options='barStackedOptions', height="250px")
    // END bar chart

.unwrap.mv-lg
  // START chart
  #panelChart9.panel(ng-controller="FlotChartController")
    .panel-heading
      // START button group
      .pull-right.btn-group(dropdown='dropdown1')
        button(type="button", dropdown-toggle="").btn.btn-default.btn-sm
          | All time
        ul.dropdown-menu.fadeInLeft.animated(role='menu')
          li
            a(href='#') Daily
          li
            a(href='#') Monthly
          li.divider
          li
            a(href='#') All time
      // END button group
      .panel-title Overall progress
    .panel-wrapper(collapse="panelChart9")
      .panel-body
        flot(src="'server/chart/splinev2.json'", options='splineOptions', height="300px")
      .panel-body
        .row
          .col-sm-3.col-xs-6.text-center
            p Projects
            .h1 25
          .col-sm-3.col-xs-6.text-center
            p Teammates
            .h1 85
          .col-sm-3.col-xs-6.text-center
            p Hours
            .h1 380
          .col-sm-3.col-xs-6.text-center
            p Budget
            .h1 $ 10,000.00
  // END chart

// START radial charts
.row.mb-lg
  .col-sm-3.col-xs-6.text-center
    p Current Project
    canvas(classyloader="", data-height="150px", data-diameter="60", data-font-size="25px", data-percentage="60", data-speed="30", data-line-color="{{colorByName('info')}}", data-remaining-line-color="#edf2f6", data-line-width="2")
  .col-sm-3.col-xs-6.text-center
    p Current Progress
    canvas(classyloader="", data-height="150px", data-diameter="60", data-font-size="25px", data-percentage="30", data-speed="30", data-line-color="{{colorByName('pink')}}", data-remaining-line-color="#edf2f6", data-line-width="2")
  .col-sm-3.col-xs-6.text-center
    p Space Usage
    canvas(classyloader="", data-height="150px", data-diameter="60", data-font-size="25px", data-percentage="50", data-speed="30", data-line-color="{{colorByName('purple')}}", data-remaining-line-color="#edf2f6", data-line-width="2")
  .col-sm-3.col-xs-6.text-center
    p Interactions
    canvas(classyloader="", data-height="150px", data-diameter="60", data-font-size="25px", data-percentage="75", data-speed="30", data-line-color="{{colorByName('warning')}}", data-remaining-line-color="#edf2f6", data-line-width="2")
// START radial charts

// START Multiple List group
.list-group
  a(href="#").list-group-item
    table.wd-wide
      tbody: tr
        td.wd-xs
          .ph
            img.media-box-object.img-responsive.img-rounded.thumb64(src="app/img/dummy.png", alt="")
        td
          .ph
            h4.media-box-heading Project A
            small.text-muted Vestibulum ante ipsum primis in faucibus orci
        td.wd-sm.hidden-xs.hidden-sm
          .ph
            p.m0 Last change
            small.text-muted 4 weeks ago
        td.wd-xs.hidden-xs.hidden-sm
          .ph
            p.m0.text-muted
              em.icon-users.mr.fa-lg
              | 26
        td.wd-xs.hidden-xs.hidden-sm
          .ph
            p.m0.text-muted
              em.icon-doc.mr.fa-lg
              | 3500
        td.wd-sm
          .ph
            progressbar.m0.progress-xs(value='80', type='success') 80%
.list-group
  a(href="#").list-group-item
    table.wd-wide
      tbody: tr
        td.wd-xs
          .ph
            img.media-box-object.img-responsive.img-rounded.thumb64(src="app/img/dummy.png", alt="")
        td
          .ph
            h4.media-box-heading Project X
            small.text-muted Vestibulum ante ipsum primis in faucibus orci
        td.wd-sm.hidden-xs.hidden-sm
          .ph
            p.m0 Last change
            small.text-muted Today at 06:23 am
        td.wd-xs.hidden-xs.hidden-sm
          .ph
            p.m0.text-muted
              em.icon-users.mr.fa-lg
              | 3
        td.wd-xs.hidden-xs.hidden-sm
          .ph
            p.m0.text-muted
              em.icon-doc.mr.fa-lg
              | 150
        td.wd-sm
          .ph
            progressbar.m0.progress-xs(value='50', type='purple') 50%
.list-group
  a(href="#").list-group-item
    table.wd-wide
      tbody: tr
        td.wd-xs
          .ph
            img.media-box-object.img-responsive.img-rounded.thumb64(src="app/img/dummy.png", alt="")
        td
          .ph
            h4.media-box-heading Project Z
            small.text-muted Vestibulum ante ipsum primis in faucibus orci
        td.wd-sm.hidden-xs.hidden-sm
          .ph
            p.m0 Last change
            small.text-muted Yesterday at 10:20 pm
        td.wd-xs.hidden-xs.hidden-sm
          .ph
            p.m0.text-muted
              em.icon-users.mr.fa-lg
              | 15
        td.wd-xs.hidden-xs.hidden-sm
          .ph
            p.m0.text-muted
              em.icon-doc.mr.fa-lg
              | 480
        td.wd-sm
          .ph
            progressbar.m0.progress-xs(value='20', type='green') 20%



  // END dashboard main content
// END Multiple List group
